<template>
    <div>
        <div class="index">
            <div class="w1">
                <p>评论</p>
            </div>
            <div class="w2" v-for="it,i in Commentmessage" :key="i">
                <router-link to="/postdetails">
                <div class="w2_1">
                    <i class="el-icon-odometer"></i>
                    <p>{{it.time}}</p>
                </div>
                <div class="w2_2">
                    <p>{{it.title}}</p>
                    <div class="w2_2_2">
                        回复评论：{{it.replytitle}}
                    </div>
                </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Commentmessage: [
                {id: 1, time: '60分前', title: '才能第三v男的女i是v比夫跑不死u', replytitle: '年底哦女i的v皮DVD'},
                {id: 2, time: '50分前', title: '才能第三v男的女i是v比夫跑不死u', replytitle: '年底哦女i的v皮DVD'},
                {id: 3, time: '10分前', title: '才能第三v男的女i是v比夫跑不死u', replytitle: '年底哦女i的v皮DVD'},
                {id: 4, time: '20分前', title: '才能第三v男的女i是v比夫跑不死u', replytitle: '年底哦女i的v皮DVD'},
                {id: 5, time: '64分前', title: '才能第三v男的女i是v比夫跑不死u', replytitle: '年底哦女i的v皮DVD'}
            ]
        }
    }
}
</script>

<style lang="less" scoped>
    a {
        color: #999;
        text-decoration: none;
    }
    .index {
        .w1 {
            border-bottom: 1px solid #ccc;
            p {
                margin-left: 30px;
                font-size: 16px;
            }
        }
        .w2 {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            .w2_1 {
                height: 30px;
                display: flex;
                align-items: center;
                color: #666;
                p {
                    margin-left: 10px;
                    // color: red;
                    // border: 1px solid red
                }
            }
            .w2_2 {
                cursor: pointer;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                p {
                    // font-size: ;
                    // border: 1px solid red;
                    // color: red;
                    color: black;
                    width: 100%;
                    font-weight: bolder;
                }
                .w2_2_2 {
                    // border: 1px solid red;
                    margin-bottom: 18px;
                    padding: 10px;
                    width: 90%;
                    color: #999;
                    background-color: #f7f8fc;
                }
            }
        }
    }
</style>